<template>
  <div class="container">

    <div class="search">
      <el-input v-model="params.content" placeholder="请输入评论内容" clearable @input="findBySearch"></el-input>
      <el-select v-model="params.userId" placeholder="请选择用户" clearable filterable @change="findBySearch">
        <el-option v-for="item in consumerData" :label="item.username" :value="item.id"></el-option>
      </el-select>
      <el-select v-model="params.status" placeholder="请选择评论状态" clearable @change="findBySearch">
        <el-option label="启用" value="0"></el-option>
        <el-option label="禁用" value="1"></el-option>
      </el-select>
      <el-select v-model="params.radio" placeholder="请选择评论对象" clearable @change="selectObj">
        <el-option label="歌曲" value="歌曲"></el-option>
        <el-option label="歌单" value="歌单"></el-option>
        <el-option label="歌手" value="歌手"></el-option>
      </el-select>
      <el-select v-model="params.radioId" :placeholder="params.radio ? params.radio : '请选择'" @change="findBySearch">
        <el-option v-for="item in objs" :key="item.id" :label="item.option" :value="item.id"></el-option>
      </el-select>
      <el-button type="warning" @click="clearParams">清空</el-button>
    </div>

    <div class="table">
      <el-table :data="commentData" stripe highlight-current-row height="75vh" width="100%">
        <el-table-column label="序号" prop="id" sortable fixed width="80" align="center"></el-table-column>
        <el-table-column label="评论人" prop="username" fixed width="120" align="center"></el-table-column>
        <el-table-column label="评论内容" prop="content" width="300" align="center">
          <template #default="{row}">
            <div class="multiline-ellipsis">{{ row.content }}</div>
          </template>
        </el-table-column>
        <el-table-column label="评论对象" prop="object" width="300" align="center"></el-table-column>
        <el-table-column label="点赞数" prop="up" sortable width="110" align="center">
          <template #default="{row}">
            <div @click="up(row)">
              <el-badge :value="row.up" :offset="[11, 11]" color="#27D0D8">
                <svg t="1748683567732" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="5320" width="25" height="25">
                  <path
                    d="M990.80712 399.4c-22.2-23.2-52-36.5-85-37.2H689.50712l12-47.5c16.5-66.6 13.7-136.2-8.4-202.2L686.00712 92.7c-16.4-47.4-61-79.6-111.6-80.2H571.00712c-64.5 0.8-117.9 51.9-121.5 118.4v29.3c0.1 3.7 0.1 7.4 0.1 10.9-2 121.2-102.7 218.3-224.1 216H118.80712l-2.7 0.1C50.30712 392-0.69288 447.5 0.00712 513.1v379.6c0 65.5 53.3 118.8 118.8 118.8h669.7c53.5-0.8 100.5-37.4 114.1-88.4l116.7-407.6c2.8-9.8 4.4-20 4.6-30.3 0.8-32.1-11-62.6-33.1-85.8zM74.90712 892.7V512.6c-0.3-26.1 19.6-48.1 45.4-50.6h79.4v474.5h-81c-24.1 0.1-43.8-19.6-43.8-43.8z m872.4-397.8L830.50712 903.1c-5.2 19.4-22.8 33.2-42.4 33.5H274.70712V458.5c139.5-21.7 247.4-140.6 249.9-286.3 0.1-4.9 0-9.8-0.1-13.4l-0.1-25.9c1.4-25.2 22.3-45.2 47.1-45.5h2.5c18.6 0.2 35.1 12.1 41.3 30.2l7 19.5c17.3 51.6 19.5 106.8 6.4 159.9l-4.2 17.5L612.00712 362l-0.1 0.1V437h292.9c12.1 0.3 23.4 5.3 31.7 14 8.3 8.8 12.8 20.2 12.5 32.3 0 4-0.6 7.9-1.7 11.6z"
                    fill="#27D0D8" p-id="5321"></path>
                </svg>
              </el-badge>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="反对数" prop="down" sortable width="110">
          <template #default="{row}">
            <div @click="down(row)">
              <el-badge :value="row.down" :offset="[11, 11]">
                <svg t="1748682896637" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3418" width="25" height="25">
                  <path
                    d="M128 682.666667a42.666667 42.666667 0 0 1-41.642667-51.925334l85.333334-469.333333A42.666667 42.666667 0 0 1 213.333333 128h341.333334c8.448 0 16.64 2.517333 23.68 7.168L695.594667 213.333333H896a42.666667 42.666667 0 0 1 42.666667 42.666667v384a42.666667 42.666667 0 0 1-42.666667 42.666667h-189.141333l-158.293334 235.306666A42.666667 42.666667 0 0 1 512 938.666667h-21.333333C431.786667 938.666667 384 853.333333 384 832L341.333333 682.666667H128z m413.781333-469.333334H247.552l-66.346667 384H384a42.666667 42.666667 0 0 1 42.666667 42.666667l42.666666 192c0 10.837333 8.106667 19.797333 18.645334 21.162667L640 628.181333V278.826667L541.781333 213.333333zM725.333333 597.333333h128V298.666667h-128v298.666666z"
                    fill="#ff4949" p-id="3419"></path>
                </svg>
              </el-badge>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评论时间" prop="createTime" width="180" align="center"></el-table-column>
        <el-table-column label="评论状态" prop="status" fixed="right" width="100">
          <template #default="{ row }">
            <el-switch v-model="row.status" @change="updateStatus(row)" active-value="0" inactive-value="1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100" align="center">
          <template #default="{row}">
            <el-popconfirm title="你确定删除嘛？" confirm-button-text="确定" cancel-button-text="取消"
              @confirm="deleteComment(row)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
        :page-sizes="[5, 10, 15, 20]" size="default" layout="total, sizes, prev, pager, next, jumper"
        :total="params.total" @size-change="findBySearch" @current-change="findBySearch" />
    </div>

    <div class="dialog"></div>
  </div>
</template>

<script setup lang="ts">
import { commentDeleteApi, commentDownApi, commentFindBySearchApi, commentFindConsumerApi, commentFindSingerApi, commentFindSongApi, commentFindSongListApi, commentSaveApi, commentUpApi } from '@/api/comment';
import { ElMessage } from 'element-plus';
import { onMounted, ref, watch } from 'vue';

const params:any = ref({
  content:'',
  userId:'',
  status:'',
  radio:'',
  radioId:'',
  pageNum:1,
  pageSize:10,
  total:''
})
const commentData = ref([])
const consumerData:any = ref([])
// const songData = ref([])
// const singerData = ref([])
// const songListData = ref([])
// 将上述三个对象数据合起来
const objs:any = ref([])

onMounted(()=>{
  findBySearch()
  findConsumer()
})

const findBySearch = async()=>{
  let res = await commentFindBySearchApi(params.value)
  params.value.total = res.data.total
  commentData.value = res.data.list.map((item:any)=>({
    ...item,
    object:(item.songName!==null&&item.songName!=='' ? item.songName
      : (item.singerName!==null&&item.singerName!=='' ? item.singerName
        : (item.songListTitle!==null&&item.songListTitle!=='' ? item.songListTitle : '未知')
      )
    )
  }))
}
// 获取用户信息
const findConsumer = async()=>{
  let res = await commentFindConsumerApi()
  consumerData.value = res.data
}

// 选择评论对象
const selectObj = async()=>{
  findBySearch()
  let id = params.value.userId ? params.value.userId : '-1'
  let res:any
  if(params.value.radio==='歌曲'){
    res = await commentFindSongApi(id)
    res.data = res.data.map((item:any)=>({
      ...item,
      option:item.songName
    }))
    // songData.value = res.data
  }else if(params.value.radio==='歌手'){
    res = await commentFindSingerApi(id)
    res.data = res.data.map((item:any)=>({
      ...item,
      option:item.singerName
    }))
    // singerData.value = res.data
  }else if(params.value.radio==='歌单'){
    res = await commentFindSongListApi(id)
    res.data = res.data.map((item:any)=>({
      ...item,
      option:item.songListTitle
    }))
    // songListData.value = res.data
  }
  objs.value = res.data
}
const clearParams = ()=>{
  params.value = {
    content: '',
    userId: '',
    status: '',
    radio: '',
    radioId: '',
    pageNum: 1,
    pageSize: 5,
    total: ''
  }
  findBySearch()
}
const updateStatus = async(row:any)=>{
  // row.status = row.status === '0' ? '1' : '0'这里不用再变是因为当点击按钮的时候status的值已经发生变化了
  await commentSaveApi(row)
  ElMessage.success('修改成功')
}
const deleteComment = async(row:any)=>{
  await commentDeleteApi(row.id)
  ElMessage.success('删除成功')
  findBySearch()
}
// 点赞
const up = async(row:any)=>{
  await commentUpApi(row)
  ElMessage.success('点赞成功')
  findBySearch()
}
// 反对
const down = async(row:any)=>{
  await commentDownApi(row)
  ElMessage.success('反对成功')
  findBySearch()
}

watch(()=>params.value.radio,(newValue,oldValue)=>{
  if(newValue==='' || newValue === undefined){
    objs.value = []
  }
},{deep:true})
</script>

<style scoped lang="scss">
.container {
  .search {
    display: flex;
    flex-wrap: nowrap;

    .el-input {
      width: 200px;
      margin-right: 10px;
    }

    .el-select {
      width: 150px;
      margin-right: 10px;
    }
  }

  .table {
    margin: 15px 0;

    .el-switch {
      --el-switch-on-color: #13ce66;
      --el-switch-off-color: #ff4949;
    }

    // 限制歌词的显示格式
    .multiline-ellipsis {
      display: -webkit-box;
      /* 多行折叠支持 */
      -webkit-line-clamp: 1;
      /* 限制显示的行数 */
      -webkit-box-orient: vertical;
      /* 垂直排列子元素（多行） */
      overflow: hidden;
      /* 超出隐藏 */
      text-overflow: ellipsis;
      /* 超出用省略号 */
      line-height: 20px;
      /* 每行高度（可调） */
      max-height: 60px;
      /* 3行 * line-height */
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
  }

  .dialog {

    .el-input,
    .el-select {
      width: 80%;
    }
  }
}

/* CSS */
.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 深度选择器
.none-up ::v-deep(.el-upload--picture-card) {
  display: none;
}
</style>
